import React from 'react';
import { Table, Tag, Radio } from 'antd';
import { StateType } from '@/common-typings';
import constant from '@/const';
import { types, strToJson } from '@/utils/utils';
import { Title } from '@/components/CreateTable/infoList';
import { formatText } from '@/components/CreateTable/utils';
import CreateTable from '@/components/CreateTable';
import styles from '@/pages/riskControl/deviantWithdrawReview/details/index.less';

const placeholder = '--';
// 获取账户类型
const getAccountType = (text: number | string) => {
  const data = constant.ACCOUNT_TYPE.filter(i => i.value === text);
  return data.length ? data[0].label : '--';
};

// 获取风险类型
const getRiskType = (text: string) => {
  const params = strToJson(text);
  let result = '';
  if (types(params) === 'array' && params.length) {
    params.forEach((item: number | string) => {
      if (constant.RISK_TYPES.some(i => i.value === item)) {
        const obj: StateType = constant.RISK_TYPES.find(i => i.value === item) || {};
        result += `${result ? ',' : ''}${obj.label}`;
      }
    });
  }
  return result;
};

/**
 * 获取账户详情
 * @param that
 */
export const getAccountInfo = (that: any) => {
  const { currentRow } = that.props;
  const accountGroup = (
    <div className={styles['withdraw-details_left']}>
      <Title key={1}>{currentRow.username || placeholder}</Title>
      <Tag key={2} color="orange" className={styles['withdraw-details_tag']}>
        {getAccountType(currentRow.userType)}
      </Tag>
      <Tag key={3} color="blue" className={styles['withdraw-details_tag']}>
        {currentRow.userLevelName || placeholder}
      </Tag>
    </div>
  );

  const columnsList = ['first', 'second', 'third', 'fourth', 'five'];
  const columns = columnsList.map((item: string) => ({
    id: item,
    title: '',
    key: item,
    dataIndex: item,
    width: 180,
    className: item,
    render: (value: any, row: StateType, index: number) => {
      if (item === 'first') {
        return {
          children: accountGroup,
          props: {
            rowSpan: index === 0 ? 5 : 0,
          },
        };
      }
      return value;
    },
  }));

  const dataSource = [
    {
      key: '1',
      second: '订单单号',
      third: currentRow.orderId || placeholder,
      fourth: '提现时间',
      five: formatText(currentRow.createDate, { formatTimeStamp: true }),
    },
    {
      key: '2',
      second: '提现金额',
      third: formatText(currentRow.amount, { formatAmount: true }),
      fourth: '手续费',
      five: formatText(currentRow.fee, { formatAmount: true }),
    },
    {
      key: '3',
      second: '银行名称',
      third: currentRow.bankName || placeholder,
      fourth: '银行卡号',
      five: currentRow.cardNo || placeholder,
    },
    {
      key: '4',
      second: '开户地区',
      third: currentRow.address || placeholder,
      fourth: '开户名称',
      five: currentRow.name || placeholder,
    },
    {
      key: '5',
      second: '风险类型',
      third: getRiskType(currentRow.riskType) || placeholder,
      fourth: '备注',
      five: currentRow.remark || placeholder,
    },
  ];

  return (
    <Table
      className="withdraw-details"
      bordered
      showHeader={false}
      dataSource={dataSource}
      columns={columns}
      scroll={{ x: 180 * 5 }}
      pagination={false}
    />
  );
};

/**
 * 获取财务信息
 * @param that
 */
export const getFinanceData = (that: any) => {
  const { financeLoading, financeList, financeDate } = that.state;
  const tableConfig = {
    loading: financeLoading,
    config: { bordered: true },
    header: [
      {
        title: '存款',
        dataIndex: 'recharge',
        width: 480,
        children: [
          {
            title: '存款次数',
            dataIndex: 'totalRechargeCount',
            width: 120,
            render: (text: number) => formatText(text, { formatMember: true }),
          },
          {
            title: '存款总额',
            dataIndex: 'totalRechargeAmount',
            width: 120,
            render: (text: number) => formatText(text, { formatAmount: true }),
          },
          {
            title: '代充次数',
            dataIndex: 'totalUpAmountCount',
            formatMember: true,
            width: 120,
            render: (text: number) => formatText(text, { formatMember: true }),
          },
          {
            title: '代充总额',
            dataIndex: 'totalUpAmountAmount',
            width: 120,
            render: (text: number) => formatText(text, { formatAmount: true }),
          },
        ],
      },
      {
        title: '取款',
        dataIndex: 'withdraw',
        width: 240,
        children: [
          {
            title: '次数',
            dataIndex: 'totalWithdrawCount',
            width: 120,
            render: (text: number) => formatText(text, { formatMember: true }),
          },
          {
            title: '总额',
            dataIndex: 'totalWithdrawAmount',
            width: 120,
            render: (text: number) => formatText(text, { formatAmount: true }),
          },
        ],
      },
      {
        title: '返水总额',
        dataIndex: 'totalRebateAmount',
        render: (text: number) => formatText(text, { formatAmount: true }),
      },
      {
        title: '红利总额',
        dataIndex: 'totalBonusAmount',
        render: (text: number) => formatText(text, { formatAmount: true }),
      },
      {
        title: '总投注',
        dataIndex: 'totalBettingAmount',
        render: (text: number) => formatText(text, { formatAmount: true }),
      },
      {
        title: '总派彩',
        dataIndex: 'totalPrizeAmount',
        render: (text: number) => formatText(text, { formatAmount: true }),
      },
      {
        title: '玩家输赢',
        dataIndex: 'totalPlayerWinLostAmount',
        render: (text: number) => formatText(text, { formatAmount: true }),
      },
    ],
    data: financeList || [],
  };
  return (
    <div className={styles['details-group']}>
      <div className={styles['details-date']}>
        <Radio.Group value={financeDate} onChange={that.handleFinanceButton}>
          <Radio.Button value="today">1日</Radio.Button>
          <Radio.Button value="month">30日</Radio.Button>
          <Radio.Button value="all">ALL</Radio.Button>
        </Radio.Group>
      </div>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 账户余额
 * @param that
 */
export const getAccountBalance = (that: any) => {
  const { balanceList, balanceLoading } = that.state;
  const columns: any[] = [
    {
      title: '平台',
      dataIndex: 'platform',
      key: 'platform',
      fixed: 'left',
    },
  ];
  constant.TRANSFER_PLATFORMS.forEach((item: StateType) => {
    columns.push({
      title: item.label,
      dataIndex: item.value,
      key: item.label,
    });
  });
  const tableConfig = {
    loading: balanceLoading,
    config: { bordered: true },
    header: columns,
    data: balanceList || [],
  };
  return <CreateTable tableConfig={tableConfig} />;
};

/**
 * 交易概况
 * @param that
 */
export const getTradingData = (that: any) => {
  const { tradingDate, tradingLoading, tradingList, tradingPagination } = that.state;
  const tableConfig = {
    loading: tradingLoading,
    pagination: tradingPagination,
    changePaginationCallBack: (param: StateType) => that.changeTradingPage(param),
    config: { bordered: true },
    height: 400,
    header: [
      {
        title: '序号',
        dataIndex: 'index',
      },
      {
        title: '交易单号',
        dataIndex: 'orderId',
      },
      {
        title: '类型',
        dataIndex: 'orderType',
        width: 160,
        render: (text: number | string) => {
          const result = constant.MEMBER_ORDER_TYPE_DETAIL.find(i => i.value === text) || {
            label: placeholder,
          };
          return result.label;
        },
      },
      {
        title: '细分类型',
        dataIndex: 'subType',
      },
      {
        title: '金额',
        width: 120,
        dataIndex: 'amount',
        formatAmount: true,
      },
      {
        title: '手续费',
        dataIndex: 'fee',
        formatAmount: true,
      },
      {
        title: '实际到账',
        dataIndex: 'reallyAmount',
        formatAmount: true,
      },
      {
        title: '操作动作',
        dataIndex: 'orderDesc',
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 100,
        render: (text: number | string) => {
          const result = constant.MEMBER_TRADE_STATUS_LIST.find(i => i.value === text) || {
            label: placeholder,
          };
          return result.label;
        },
      },
      {
        title: '时间',
        dataIndex: 'createTime',
        formatTimeStamp: true,
      },
    ],
    data: tradingList,
  };
  return (
    <div className={styles['details-group']}>
      <div className={styles['details-date']}>
        <Radio.Group value={tradingDate} onChange={that.handleTradingButton}>
          <Radio.Button value="today">1日</Radio.Button>
          <Radio.Button value="month">30日</Radio.Button>
          <Radio.Button value="all">ALL</Radio.Button>
        </Radio.Group>
      </div>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 注单详情
 * @param that
 */
export const getBettingData = (that: any) => {
  const { bettingDate, bettingLoading, bettingList, bettingPagination } = that.state;
  const tableConfig = {
    loading: bettingLoading,
    pagination: bettingPagination,
    changePaginationCallBack: (param: StateType) => that.changeBettingPage(param),
    config: { bordered: true },
    height: 400,
    header: [
      {
        title: '第三方订单号',
        dataIndex: 'merOrderId',
      },
      {
        title: '下注时间',
        dataIndex: 'createTime',
        formatTimeStamp: true,
      },
      {
        title: '派彩时间',
        dataIndex: 'payoutTime',
        formatTimeStamp: true,
      },
      {
        title: '账户名',
        dataIndex: 'userName',
      },
      {
        title: '游戏账户名',
        dataIndex: 'merUsername',
      },
      {
        title: '游戏平台',
        dataIndex: 'channelName',
      },
      {
        title: '子游戏',
        dataIndex: 'gameName',
      },
      {
        title: '投注内容',
        dataIndex: 'betDetails',
      },
      {
        title: '游戏结果',
        dataIndex: 'gameResult',
      },
      {
        title: '注单状态',
        dataIndex: 'status',
        render: (text: number | string) => {
          const result = constant.NOTE_STATUS.find(i => i.value === text) || {
            label: placeholder,
            color: 'grey',
          };
          return <Tag color={result.color}>{result.label}</Tag>;
        },
      },
      {
        title: '下注金额',
        dataIndex: 'amount',
        formatAmount: true,
      },
      {
        title: '派彩金额',
        dataIndex: 'prize',
        formatAmount: true,
      },
      {
        title: '同步时间',
        dataIndex: 'syncTime',
        formatTimeStamp: true,
      },
      {
        title: '输赢',
        dataIndex: 'totalWin',
        width: 120,
        formatAmount: true,
      },
      {
        title: '公司有效投注',
        dataIndex: 'effectiveAmount',
        formatAmount: true,
      },
      {
        title: '注单号',
        dataIndex: 'orderId',
      },
      {
        title: '所属代理',
        dataIndex: 'parentName',
      },
      {
        title: '活动流水',
        dataIndex: 'validAmount',
        formatAmount: true,
      },
      {
        title: '备注',
        dataIndex: 'validRemark',
      },
    ],
    data: bettingList,
  };
  return (
    <div className={styles['details-group']}>
      <div className={styles['details-date']}>
        <Radio.Group value={bettingDate} onChange={that.handleBettingButton}>
          <Radio.Button value="today">1日</Radio.Button>
          <Radio.Button value="month">30日</Radio.Button>
          <Radio.Button value="all">ALL</Radio.Button>
        </Radio.Group>
      </div>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 获取银行卡信息
 * @param that
 */
export const getBackCardData = (that: any) => {
  const { bankCardLoading, bankCardList } = that.state;
  const tableConfig = {
    loading: bankCardLoading,
    config: { bordered: true },
    header: [
      {
        title: '绑定时间',
        dataIndex: 'createDate',
        formatTimeStamp: true,
      },
      {
        title: '银行名称',
        dataIndex: 'bankName',
      },
      {
        title: '持卡人姓名',
        dataIndex: 'name',
      },
      {
        title: '卡号',
        dataIndex: 'cardNo',
      },
      {
        title: '分行地址',
        dataIndex: 'address',
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 100,
        render: (text: number | string) => {
          const result = constant.MEMBER_BANK_STATUS.find(i => i.value === text) || {
            label: placeholder,
          };
          return result.label;
        },
      },
      {
        title: '删除时间',
        dataIndex: 'lastUpdate',
        render: (text: number | string, row: StateType) => {
          if (row.status === 1) {
            return formatText(row.lastUpdate, { formatTimeStamp: true });
          }
          return '--';
        },
      },
    ],
    data: bankCardList || [],
  };
  return (
    <div className={styles['details-group']}>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};

/**
 * 登入日志
 * @param that
 */
export const getLoginData = (that: any) => {
  const { loginDate, loginLoading, loginList, loginPagination } = that.state;
  const tableConfig = {
    loading: loginLoading,
    pagination: loginPagination,
    changePaginationCallBack: (param: StateType) => that.changeLoginPage(param),
    config: { bordered: true },
    height: 400,
    header: [
      {
        title: '序号',
        dataIndex: 'index',
      },
      {
        title: 'IP',
        dataIndex: 'ip',
      },
      {
        title: 'IP归属地',
        dataIndex: 'operates',
        render: (text: string, row: StateType) => {
          const { geoip } = row;
          if (types(geoip) === 'object') {
            return `${geoip.country} ${geoip.region} ${geoip.city}` || placeholder;
          }
          return placeholder;
        },
      },
      {
        title: '登录网址',
        dataIndex: 'domain',
      },
      {
        title: '登录设备',
        dataIndex: 'platform',
        render: (text: number | string) => {
          const result = constant.DEVICE_TYPE.find(i => i.value === text) || { label: placeholder };
          return result.label;
        },
      },
      {
        title: '时间',
        dataIndex: '@timestamp',
        toTime: true,
      },
    ],
    data: loginList,
  };
  return (
    <div className={styles['details-group']}>
      <div className={styles['details-date']}>
        <Radio.Group value={loginDate} onChange={that.handleLoginButton}>
          <Radio.Button value="today">1日</Radio.Button>
          <Radio.Button value="month">30日</Radio.Button>
          <Radio.Button value="all">ALL</Radio.Button>
        </Radio.Group>
      </div>
      <CreateTable tableConfig={tableConfig} />
    </div>
  );
};
